<template>
  <div class="business-box">
    <div class="business-title font32">业务信息——目标</div>
    <Selector
      :current="dateType"
      :list="typeList"
      :top="50"
      :right="30"
      @change="chnageType"
    />
    <div class="h540">
      <div id="business-page" />
    </div>
    <div class="h320">
      <Pie-charts
        cid="businessCount"
        :data="dataCount"
        :labels="dataLabels"
        :position="[
          ['50%', '20%'],
          ['50%', '50%'],
          ['50%', '80%'],
        ]"
        :tooltip="false"
        :radius="['35%', '55%']"
        label-size="16px"
        :colors="limitColor"
      />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { businessDetails, businessStatistics } from "@/api/srceen/home";
export default {
  data() {
    return {
      dateType: "DAY", // 类型
      typeList: [
        { label: "日", value: "DAY" },
        { label: "周", value: "WEEK" },
        { label: "月", value: "MONTH" },
      ],
      xlist: [],
      dataList: [],
      dataCount: [],
      dataLabels: [],
      limitColor: [
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#FF4545" },
            { offset: 0.49, color: "#ED4141" },
          ]),
          bgColor: "#ED414133",
          max: 49,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#ED9E41" },
            { offset: 0.5, color: "#FBFF45" },
            { offset: 0.89, color: "#ED9E41" },
          ]),
          bgColor: "#FBFF4533",
          max: 89,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#44f7af" },
            { offset: 0.5, color: "#43dfcb" },
            { offset: 0.89, color: "#41c6ea" },
            { offset: 1, color: "#44f7af" },
          ]),
          bgColor: "#44f7af33",
          max: 100,
        },
      ],
      colors: [
        ["#f53f3f", "#272b35"],
        ["#73D694", "#272b35"],
        ["#2075F4", "#2075F4"],
        ["#2075F4", "#2075F4"],
      ],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.chnageType({ value: this.dateType });
  },
  methods: {
    // 切换类型
    chnageType(val) {
      this.dateType = val.value;
      if (val.value === "DAY") {
        this.dataLabels = ["昨日达成率\n", "今日达成率\n", "近7日达成率\n"];
      } else if (val.value === "WEEK") {
        this.dataLabels = ["上周达成率\n", "本周达成率\n", "近4周达成率\n"];
      } else if (val.value === "MONTH") {
        this.dataLabels = ["上月达成率\n", "本月达成率\n", "去年本月达成率\n"];
      }
      this.getList();
      this.$emit("changeType", val.value);
    },
    // 获取图表数据
    getList() {
      businessDetails({ dateType: this.dateType }).then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis || [];
          this.dataList = [
            {
              data: res.data.target || [],
              name: "目标",
              type: "bar",
              pos: "top",
            },
            {
              data: res.data.actual || [],
              name: "订单",
              type: "bar",
              pos: "inside",
            },
            {
              data: res.data.actual || [],
              name: "趋势",
              type: "line",
              pos: "",
            },
          ];
          this.initChart();
        }
      });
      businessStatistics({ dateType: this.dateType }).then((res) => {
        if (res.data) {
          this.dataCount = [];
          res.data.forEach((i) => {
            let data = i.ratio ? Number(i.ratio || "0") * 100 : Number(i.value || "0");
            this.dataCount.push({ data: data >= 100 ? 100 : data });
          });
        }
      });
    },
    initChart() {
      let domid = document.getElementById("business-page");
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let legData = [];
      let series = [];
      this.dataList.forEach((item, index) => {
        if (index < 1) {
          legData.push({
            name: item.name,
            itemStyle: { opacity: item.type === "line" ? 0 : 1 },
          });
        }
        let itemObj = {
          data: item.data,
          type: item.type,
          name: item.name,
          smooth: true,
          symbol: item.type === "line" ? "diamond" : "rect",
          itemStyle: {
            color: () => {
              let colorItem = this.colors[index];
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: colorItem[0] },
                  { offset: 1, color: colorItem[1] },
                ],
                false
              );
            },
          },
        };
        if (item.type === "bar") {
          itemObj = {
            ...itemObj,
            barGap: "-100%",
            barWidth: "30%",
            label: {
              show: item.pos ? true : false,
              position: item.pos,
              fontSize: 12,
              formatter: "{c}",
              color: item.pos === "top" ? "#ea4949" : "#fff",
            },
          };
        }
        series.push(itemObj);
        if (index == 1) {
          let itemTop = {
            data: item.data,
            type: "pictorialBar",
            name: "",
            symbol:
              "image://",
            symbolSize:
              this.dateType == "DAY"
                ? [20, 6]
                : this.dateType == "WEEK"
                ? [46, 6]
                : [30, 6],
            symbolOffset: [0, -3],
            symbolPosition: "end",
            z: 12,
            label: {
              show: false,
            },
          };
          series.push(itemTop);
        }
      });
      let nulldata = [];
      this.xlist.forEach(() => {
        nulldata.push(0);
      });
      series.push({
        type: "custom",
        itemStyle: {
          borderWidth: 1,
          borderColor: "#373D4B",
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#282c37" },
              { offset: 1, color: "#1c202b" },
            ],
          },
        },
        data: nulldata,
        z: 1,
        renderItem: (params, api) => {
          var start = api.coord([api.value(0)]);
          var width = (params.coordSys.width / this.xlist.length) * 0.6;
          return {
            type: "rect",
            shape: {
              x: start[0] - width / 2,
              y: params.coordSys.y,
              width: width,
              height: params.coordSys.height,
            },
            style: api.style(),
          };
        },
      });
      let color = [];
      this.colors.forEach((i) => {
        color.push({
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: i[0] },
            { offset: 1, color: i[1] },
          ],
          global: false,
        });
      });
      let option = {
        color: color,
        grid: {
          top: "20%",
          left: "8%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          show: true,
          itemWidth: 14,
          itemHeight: 14,
          data: legData,
          left: "10%",
          top: "8%",
          textStyle: { color: "#fff" },
        },
        xAxis: {
          type: "category",
          data: this.xlist,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#5a718b" },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          show: this.dataList.length > 0,
          type: "value",
          name: "平方米",
          offset: 20,
          nameGap: 10,
          nameLocation: "start",
          nameTextStyle: {
            fontSize: 12,
            color: "#DFEFFF",
            align: "right",
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.business-box {
  width: 1224px;
  height: 904px;
  background: url("../../../../assets/img/bg1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  #business-page {
    width: 100%;
    height: 100%;
  }
  .business-title {
    font-family: YouSheiBlack;
    color: #45f4ff;
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
  }
}
</style>
